<template>
	<view class="welcome-container">
		<view class="logo-section">
			<image class="logo-img" src="/static/logo.png" mode="aspectFit" />
			<view class="logo-title">LAMP</view>
		</view>
		<view class="main-title">Navigate Your Work Journey<br />Efficient & Easy</view>
		<view class="sub-title">Increase your work management & career<br />development radically</view>
		<button class="sign-in-btn" @click="openImageModal">Log in</button>
		<button class="sign-up-btn" @click="openRegisterModal" plain="true">Sign Up</button>
		<uv-action-sheet ref="showRegisterModal" @close="closeregisterModal" :round="10">

		</uv-action-sheet>
		<uv-action-sheet ref="showLoginModal" @close="closeImageModal" :round="10">
			<view class="login-card">
				<view class="tab-bar">
					<view :class="['tab-item', activeTab === 0 ? 'active' : '']" @click="activeTab = 0">Account login
					</view>
					<view v-if="feaId && model == 'iPhone'" :class="['tab-item', activeTab === 1 ? 'active' : '']" @click="handleFaeIDlogin">Facial
						recognition</view>
				</view>
				<view class="login-form-container">
					<view v-if="activeTab === 0" style="width: 100%;">
						<view class="input-label">Account number</view>
						<view class="input-wrapper">
							<image class="input-icon" src="/static/user-icon.png" />
							<input class="input" v-model="phone" placeholder="Account number" />
						</view>
						<view class="input-label">Password</view>
						<view :class="['input-wrapper', passwordError ? 'input-error' : '']">
							<image class="input-icon" src="/static/pwd-icon.png" />
							<input class="input" :type="showPwd ? 'text' : 'password'" v-model="password"
								placeholder="Password" />
							<image class="eye-icon" :src="showPwd ? '/static/eye-open.png' : '/static/eye-open.png'"
								@click="showPwd = !showPwd" />
						</view>
						<view v-if="passwordError" class="error-text">Wrong Password</view>
						<view class="form-row">
								<uv-checkbox-group v-model="rememberMe">
									<uv-checkbox activeColor="#1ecb6c"  name="apple" label="Remember Me"></uv-checkbox>
								</uv-checkbox-group>
							<!-- <label class="checkbox-label">
								<checkbox v-model="rememberMe" color="#1ecb6c" />
								<text>Remember Me</text>
							</label> -->
							<text class="forgot-link" @click="onForgot">Forgot Password</text>
						</view>
						<button class="login-btn" @click="onLogin">Sign In</button>
						<view class="divider-row">
							<view class="divider"></view>
							<text class="divider-or">OR</text>
							<view class="divider"></view>
						</view>
						<view class="phone-btn" @click="onPhoneLogin">
							<image class="phone-icon" src="/static/phone-icon.png" />
							<text>Sign in With Phone</text>
						</view>
						<view class="bottom-row">
							<text>Don't have an account?</text>
							<text class="signup-link" @click="openRegisterModal">Sign Up Here</text>
						</view>
					</view>
					<view v-else class="face-login-placeholder" style="width: 100%;" @click="setRefreshToken">
						<text>Facial recognition</text>
					</view>
				</view>
			</view>
		</uv-action-sheet>
		<uv-popup ref="showphoneModal" round="20" :customStyle="{ overflow: 'initial' }">
			<view class="forgot-modal" v-if="forgotPwdStatus == 1">
				<view class="modal-icon-box">
					<uv-icon class="modal-icon" size="56" color="#fff" name="lock-fill"></uv-icon>
				</view>
				<view class="modal-title">Forgot Password</view>
				<view class="modal-tip">
					Reset Password code will be sent to your mobile inbox<br />to reset your password.
				</view>
				<view class="input-label">Phone Number</view>
				<view class="phone-input-wrapper">
					<picker mode="selector" :range="countryList" :value="countryIndex" class="country-picker">
						<view class="country-text">{{ countryList[countryIndex] }} <text class="arrow">▼</text></view>
					</picker>
					<input class="phone-input" v-model="phone" placeholder="+62 821 0000 0000" />
				</view>
				<button class="forgot-btn" @click="handleGetCode(2)">Send Verification Code</button>
			</view>
			<view class="code-modal" v-else-if="forgotPwdStatus == 2">
				<view class="modal-icon-box">
					<uv-icon class="modal-icon" size="46" color="#fff" name="phone-fill"></uv-icon>
					<!-- <image class="modal-icon" src="/static/phone-icon.png" /> -->
				</view>
				<view class="modal-title">Log In Phone Number</view>
				<view class="modal-tip">
					Log in code has been sent to <text class="modal-phone">+6292121002200</text>,<br />check your inbox
					to
					continue the sign in process.
				</view>
				<view class="code-input-row">
					<uv-code-input v-model="code" @change="change" maxlength="6" @finish="finish"></uv-code-input>
					<!-- <input v-for="(item, idx) in 6" :key="idx" class="code-input" maxlength="1" v-model="codeArr[idx]" @input="onCodeInput(idx, $event)" /> -->
				</view>
				<view class="modal-resend">
					Haven't received the sign in code?
					<text class="resend-link" @click="onResend">Resend it.</text>
				</view>
				<button class="modal-submit-btn" @click="handleGetCode(3)">Submit</button>
				<view class="modal-other">
					Log in with different method <text class="other-link" @click="onOtherMethod">Here.</text>
				</view>
			</view>
			<view class="forgot-modal" v-else>
				<view class="modal-icon-box">
					<uv-icon class="modal-icon" size="56" color="#fff" name="lock-fill"></uv-icon>
				</view>
				<view class="modal-title">Set a New Password</view>
				<view class="modal-tip" style="text-align: left;">
					Please set a new password to protect your Fedex account.
				</view>

				<view class="input-label">Password</view>
				<view :class="['input-wrapper', passwordError ? 'input-error' : '']">
					<image class="input-icon" src="/static/pwd-icon.png" />
					<input class="input" :type="showPwd ? 'text' : 'password'" v-model="password"
						placeholder="Password" />
					<image class="eye-icon" :src="showPwd ? '/static/eye-open.png' : '/static/eye-open.png'"
						@click="showPwd = !showPwd" />
				</view>

				<view class="input-label">Confirm Password</view>
				<view :class="['input-wrapper', passwordError ? 'input-error' : '']">
					<image class="input-icon" src="/static/pwd-icon.png" />
					<input class="input" :type="showPwd ? 'text' : 'password'" v-model="cnfpassword"
						placeholder="Password" />
					<image class="eye-icon" :src="showPwd ? '/static/eye-open.png' : '/static/eye-open.png'"
						@click="showPwd = !showPwd" />
				</view>
				<button class="forgot-btn" style="margin-top: 30rpx;" @click="onSendCode">Submit</button>
			</view>
		</uv-popup>

		<uv-popup ref="showphoneLoginModal" round="20" :customStyle="{ overflow: 'initial' }">
			<view class="forgot-modal" v-if="phoneLoginStatus == 1">
				<view class="modal-title">Log in</view>
				<view class="modal-tip">
					Login to my account
				</view>
				<view class="input-label">Phone Number</view>
				<view class="phone-input-wrapper">
					<picker mode="selector" :range="countryList" :value="countryIndex" class="country-picker">
						<view class="country-text">{{ countryList[countryIndex] }} <text class="arrow">▼</text></view>
					</picker>
					<input class="phone-input" v-model="phone" placeholder="+62 821 0000 0000" />
				</view>
				<button class="forgot-btn" @click="handlePhoneLogin(2)">Send Verification Code</button>
				<view class="checkbox-label" style="padding: 30rpx 0	;justify-content: center;">
					<uv-checkbox-group  style="    justify-content: center;"
						v-model="agreement" >
						<uv-checkbox  name="apple" color="#1ecb6c" >
							<text class="divider">
								I have read the Consent<text class="link">Privacy Policy</text>
							</text>
						</uv-checkbox>
					</uv-checkbox-group>
				</view>
				<view class="modal-other">
					Log in with different method <text class="other-link" @click="onOtherMethod">Here.</text>
				</view>
			</view>
			<view class="code-modal" v-else>
				<view class="modal-icon-box">
					<uv-icon class="modal-icon" size="46" color="#fff" name="phone-fill"></uv-icon>
					<!-- <image class="modal-icon" src="/static/phone-icon.png" /> -->
				</view>
				<view class="modal-title">Log In Phone Number</view>
				<view class="modal-tip">
					Log in code has been sent to <text class="modal-phone">+6292121002200</text>,<br />check your inbox
					to
					continue the sign in process.
				</view>
				<view class="code-input-row">
					<uv-code-input v-model="code" @change="change" maxlength="6" @finish="finish"></uv-code-input>
					<!-- <input v-for="(item, idx) in 6" :key="idx" class="code-input" maxlength="1" v-model="codeArr[idx]" @input="onCodeInput(idx, $event)" /> -->
				</view>
				<view class="modal-resend">
					Haven't received the sign in code?
					<text class="resend-link" @click="onResend">Resend it.</text>
				</view>
				<button class="modal-submit-btn" @click="handlePhoneLogin(3)">Submit</button>
				<view class="modal-other">
					Log in with different method <text class="other-link" @click="onOtherMethod">Here.</text>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
import { getUserInfo, userLogin, getSendSms, phoneLogin, findPassword } from '@/api/login'
import { mapActions, mapState } from 'pinia'
import { useUserinfoStore } from '@/store/info'
export default {
	name: 'WelcomePage',
	data() {
		return {
			showImageModal: false,
			forgotPwdStatus: 1,
			phoneLoginStatus: 1,
			activeTab: 0,
			account: '',
			password: '',
			cnfpassword: '',
			showPwd: false,
			rememberMe: uni.getStorageSync('rememberMe') || false,
			agreement: false,
			consent: false,
			countryList: ['INA'],
			countryIndex: 0,
			code: '',
			phone: ''
		}
	},
	
	computed: {
		...mapState(useUserinfoStore, ['feaId', 'model']),
	},
	beforeMount() {
	},

	// 组件挂载后
	async mounted() {
		let phone = uni.getStorageSync('phone')
		let password = uni.getStorageSync('password')
		if(phone){
			this.phone = phone
			this.password = password
		}
	},
	methods: {
		...mapActions(useUserinfoStore, ['setToken', 'setRefreshToken']),
		openImageModal() {
			this.$refs.showLoginModal.open();
		},
		openphoneLoginModal() {
			this.$refs.showphoneLoginModal.open();
		},
		openRegisterModal() {
			console.log('openRegisterModal');
			uni.navigateTo({
				url: '/pages/login/register'
			})
			// this.$refs.showRegisterModal.open();
		},
		closeregisterModal() {
			this.$refs.showRegisterModal.close();
		},
		closeImageModal() {
			this.$refs.showLoginModal.close();
		},
		onPhoneLogin() {
			this.$refs.showphoneLoginModal.open('bottom');
		},
		async handlePhoneLogin(val){
			if (val == 2) {//获取验证码
				console.log('handleGetCode', this.phone)
				if(!this.agreement){
					return uni.$uv.toast('请先同意用户协议')
				}
				// const phoneRegex = /^+(?:[0-9] ?){6,14}[0-9]$/;
				if (this.phone) { //&& phoneRegex.test(this.phone)
					await getSendSms(this.phone)
					this.phoneLoginStatus = 2
				} else {
					uni.$uv.toast('请填写正确的手机号码')
					return
				}
			}
			if(val == 3){//登录
				let { token } =  await phoneLogin({phone: this.phone, code: this.code})
				console.log('handleGetCode', token)
				this.setToken(token.access_token)
			}
		},
		async handleGetCode(val) {
			if (val == 2) {//获取验证码
				console.log('handleGetCode', this.phone)
				// const phoneRegex = /^+(?:[0-9] ?){6,14}[0-9]$/;
				if (this.phone) { //&& phoneRegex.test(this.phone)
					await getSendSms(this.phone)
					this.forgotPwdStatus = 2
				} else {
					uni.$uv.toast('请填写正确的手机号码')
					return
				}
			} else if (val == 3) {// 提交验证码
				if(this.code){
					this.forgotPwdStatus = 3
				}else{
					uni.$uv.toast('请填写验证码')
				}
			}else{
				if(!this.password){
					return uni.$uv.toast('请填写密码')
				}
				if(!this.cnfpassword){
					return uni.$uv.toast('请填写确认密码')
				}
				if(this.password != this.cnfpassword){
					return uni.$uv.toast('两次输入密码不一致')
				}
			}
		},
		async onLogin() {
			if (!this.phone || !this.password) {
				uni.showToast({
					title: '请输入账号和密码',
					icon: 'none'
				})
				return
			}
			uni.showToast({
				title: 'Login...',
				icon: 'loading'
			})
			let { token } = await userLogin({username: this.phone, password: this.password})
			this.setToken(token.access_token)
			console.log('rememberMe', this.rememberMe)
			if(this.rememberMe){
				uni.setStorageSync('rememberMe', this.rememberMe)
				uni.setStorageSync('phone', this.phone)
				uni.setStorageSync('password', this.password)
			}else{
				uni.removeStorage('rememberMe')
				uni.removeStorage('phone')
				uni.removeStorage('password')
			}
			// if (!this.consent) {
			// 	uni.showToast({
			// 		title: '请阅读并同意隐私政策',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			// 登录逻辑
		},
		onForgot() {
			this.openForgotPwd();
		},
		finish(val){
			console.log('finish', val)
		},
		onSignUp() {
			uni.showToast({
				title: '注册功能待实现',
				icon: 'none'
			})
		},
		onPrivacy() {
			uni.showToast({
				title: '隐私政策功能待实现',
				icon: 'none'
			})
		},
		handleFaeIDlogin(){
			this.activeTab = 1
			this.setRefreshToken()
		},
		openForgotPwd() {
			this.$refs.showphoneModal.open('bottom');
			this.password = ''
			this.phone = ''
			this.cnfpassword = ''
		},
		async onSendCode() {//修改密码
			if (!this.password) {
				uni.showToast({ title: '请输入密码', icon: 'none' })
				return;
			}
			if (!this.cnfpassword) {
				uni.showToast({ title: '请输入确认密码', icon: 'none' })
				return;
			}
			if (this.password != this.cnfpassword) {
				uni.showToast({ title: '两次输入密码不一致', icon: 'none' })
				return;
			}
			uni.showToast({ title: '修改成功去登陆', icon: 'success' })
			let findPasswordReust = await findPassword({phone: this.phone, code: this.code, password: this.password})
			console.log('handleGetCode', findPasswordReust)
			this.$refs.showphoneModal.close();
			this.$refs.showLoginModal.open();
		}
	}
}
</script>

<style lang="scss" scoped>
.welcome-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	background: linear-gradient(180deg, #2d3a53 0%, #f5f6fa 100%);
}

.logo-section {
	margin-top: 180rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 60rpx;
}

.logo-img {
	width: 180rpx;
	height: 180rpx;
	border-radius: 40rpx;
	margin-bottom: 20rpx;
	background: #e5e5e5;
}

.logo-title {
	font-size: 56rpx;
	color: #3a6a4f;
	font-weight: 600;
	letter-spacing: 4rpx;
}

.main-title {
	font-size: 40rpx;
	color: #1a2233;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20rpx;
}

.sub-title {
	font-size: 26rpx;
	color: #5a6273;
	text-align: center;
	margin-bottom: 60rpx;
}

.sign-in-btn {
	width: 80%;
	height: 90rpx;
	background: linear-gradient(90deg, #1ecb6c 0%, #1ea7cb 100%);
	color: #fff;
	font-size: 32rpx;
	border-radius: 45rpx;
	margin-bottom: 30rpx;
	font-weight: bold;
	box-shadow: 0 8rpx 24rpx rgba(30, 203, 108, 0.15);
}

.sign-up-btn {
	width: 80%;
	height: 90rpx;
	color: #1ecb6c;
	font-size: 32rpx;
	border-radius: 45rpx;
	border: 2rpx solid #1ecb6c;
	background: transparent;
	font-weight: bold;
	margin-bottom: 40px;
}

.open-modal-btn {
	position: fixed;
	bottom: 120rpx;
	right: 40rpx;
	z-index: 10;
	background: #1ecb6c;
	color: #fff;
	border-radius: 50rpx;
	padding: 20rpx 40rpx;
	font-size: 28rpx;
	box-shadow: 0 4rpx 16rpx rgba(30, 203, 108, 0.15);
}

.modal-mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	background: #fff;
	border-radius: 24rpx;
	padding: 40rpx 30rpx 30rpx 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 500rpx;
	min-height: 400rpx;
	position: relative;
}

.modal-img {
	width: 320rpx;
	height: 320rpx;
	margin-bottom: 30rpx;
	border-radius: 16rpx;
}

.close-btn {
	background: #1ecb6c;
	color: #fff;
	border-radius: 40rpx;
	padding: 16rpx 60rpx;
	font-size: 28rpx;
	margin-top: 10rpx;
}

.login-card {

	width: 100vw;
	min-height: 800rpx;
	background: #fff;
	// border-radius: 48rpx 48rpx 0 0;
	// box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
	padding: 60rpx 0rpx 60rpx 0rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.login-form-container {
		width: calc(100% - 80rpx);
		text-align: left;
		padding: 0 40rpx;
	}

	.tab-bar {
		display: flex;
		flex-direction: row;
		margin-bottom: 30rpx;
		border-bottom: 2rpx solid #e5e5e5;
		width: 100%;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		color: #aab0bb;
		font-weight: 500;
		padding-bottom: 16rpx;
		position: relative;
	}

	.tab-item.active {
		color: #1a2233;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		display: block;
		width: 60rpx;
		height: 4rpx;
		background: #1ecb6c;
		border-radius: 2rpx;
		margin: 0 auto;
		margin-top: 8rpx;
	}

	.forgot-link {
		color: #5a6273;
		font-size: 26rpx;
		text-decoration: underline;
	}

	.login-btn {
		width: 100%;
		height: 90rpx;
		background: linear-gradient(90deg, #1ecb6c 0%, #1ea7cb 100%);
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
		font-weight: bold;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}

	.divider-row {
		display: flex;
		align-items: center;
		width: 100%;
		margin: 30rpx 0 60rpx 0;
	}

	.divider {
		flex: 1;
		height: 2rpx;
		background: #e5e5e5;
		border-radius: 1rpx;
	}

	.divider-or {
		margin: 0 24rpx;
		color: #aab0bb;
		font-size: 26rpx;
	}

	.phone-btn {
		width: 100%;
		height: 90rpx;
		background: #fff;
		color: #232b3b;
		font-size: 32rpx;
		border-radius: 45rpx;
		font-weight: bold;
		border: 2rpx solid #bfc8d6;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.phone-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
	}

	.bottom-row {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 10rpx;
		font-size: 26rpx;
		line-height: 30rpx;
		color: #222;
	}

	.signup-link {
		color: #1ecb6c;
		margin-left: 10rpx;
	}

	.face-login-placeholder {
		text-align: center;
		color: #aab0bb;
		font-size: 30rpx;
		margin: 60rpx 0;
	}
}


.modal-other {
	width: 100%;
	text-align: center;
	font-size: 26rpx;
	color: #222;
}

.code-modal {
	padding: 160rpx 30rpx 30rpx 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.modal-icon-box {
		width: 192rpx;
		height: 192rpx;
		background: #1ecb6c;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(30, 203, 108, 0.15);
		position: absolute;
		top: -96rpx;
	}

	.modal-title {
		font-size: 40rpx;
		color: #232b3b;
		font-weight: bold;
		margin-bottom: 18rpx;
		margin-top: 10rpx;
		text-align: center;
	}

	.modal-tip {
		font-size: 26rpx;
		color: #5a6273;
		text-align: center;
		margin-bottom: 36rpx;
		line-height: 1.6;
	}

	.modal-phone {
		color: #1ecb6c;
		font-weight: bold;
	}

	.code-input-row {
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;
		gap: 18rpx;
	}

	.code-input {
		width: 70rpx;
		height: 80rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 16rpx;
		background: #fff;
		text-align: center;
		font-size: 38rpx;
		color: #232b3b;
	}


	.resend-link {
		color: #1ecb6c;
		font-weight: bold;
		margin-left: 8rpx;
	}

	.modal-submit-btn {
		width: 100%;
		height: 90rpx;
		background: linear-gradient(90deg, #1ecb6c 0%, #1ea7cb 100%);
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		margin-top: 10rpx;
	}

	.other-link {
		color: #1ecb6c;
		text-decoration: underline;
		margin-left: 6rpx;
	}
}

.eye-icon {
	width: 36rpx;
	height: 36rpx;
	margin-left: 12rpx;
}

.input-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 12rpx;
}

.input-label {
	font-size: 26rpx;
	color: #5a6273;
	margin: 30rpx 0 8rpx 8rpx;
	align-self: flex-start;
}

.input-wrapper {
	display: flex;
	align-items: center;
	border: 2rpx solid #bfc8d6;
	border-radius: 16rpx;
	padding: 0 20rpx;
	margin-bottom: 18rpx;
	background: #f8fafc;
	height: 90rpx;
}


.input {
	flex: 1;
	height: 90rpx;
	border: none;
	background: transparent;
	font-size: 30rpx;
	color: #1a2233;
}


.input-error {
	border: 2rpx solid #ff4d4f !important;
	background: #fff6f6 !important;
}

.error-text {
	color: #ff4d4f;
	font-size: 24rpx;
	margin-bottom: 8rpx;
	margin-left: 8rpx;
	align-self: flex-start;
}

.form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 46rpx;
	width: 100%;
}


.checkbox-label {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	color: #222;
}

.modal-resend {
	font-size: 26rpx;
	color: #5a6273;
	margin-bottom: 30rpx;
	text-align: center;
}
</style>